:root {
	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;

	color-scheme: light dark;
	color: rgba(255, 255, 255, 0.87);
	background-color: #242424;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	font-weight: 500;
	color: #646cff;
	text-decoration: inherit;
}
a:hover {
	color: #535bf2;
}

body,
html,
* {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 3.2em;
	line-height: 1.1;
}

button {
	border-radius: 8px;
	border: 1px solid transparent;
	padding: 0.6em 1.2em;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	background-color: #1a1a1a;
	cursor: pointer;
	transition: border-color 0.25s;
}
button:hover {
	border-color: #646cff;
}
button:focus,
button:focus-visible {
	outline: 4px auto -webkit-focus-ring-color;
}

.card {
	padding: 2em;
}

#app {
	margin: 0;
	padding: 0;
}

@media (prefers-color-scheme: light) {
	:root {
		color: #213547;
		background-color: #ffffff;

		--van-primary-color: #646cff; /* 主色 */
		--van-background-color: #ffffff; /* 背景色 */
		--van-text-color: #213547; /* 文本颜色 */
		--van-border-color: #ebedf0; /* 边框颜色 */
	}
	a:hover {
		color: #747bff;
	}
	button {
		background-color: #f9f9f9;
	}
}
/*问卷*/
.survey-container {
	padding: 20px 6px;
	font-family: sans-serif;
	h1 {
		text-align: center;
		margin-bottom: 20px;
	}

	button {
		background-color: #4caf50;
		border: none;
		color: white;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin-top: 20px;
		cursor: pointer;
		border-radius: 5px;
	}
	.ques-block {
		margin-bottom: 20px;
		background: rgba(0, 0, 0, 0.2);
		padding: 8px;
	}

	.ques-opt-title {
		font-size: 18px;
		font-weight: 600;

		margin: 0 0 10px 0;
		.star {
			color: red;
			&::after {
				content: "*";
				padding-right: 3px;
				vertical-align: sub;
			}
		}
		.required-err-msg {
			color: red;
			font-size: 12px;
			margin-left: 5px;
		}
	}
	.ques-opt-body {
		margin-left: 1em;
		i[contentEditable="true"] {
			margin: 0 5px;
			min-width: 30px;
			font-weight: 600;
			padding: 3px 12px;
			font-style: normal;
			text-align: center;
			border: transparent;
			display: inline-block;
			background-color: transparent;
			border-bottom: 1px solid gray;
			&:focus {
				outline: none;
				font-weight: bold;
				color: rgb(0, 148, 101);
			}
		}
		.checkbox,
		.radio {
			display: flex;
			align-items: center;
			> span {
				margin-left: 6px;
			}
		}
		input {
			&[type="text"],
			&[type="date"] {
				width: 100%;
				padding: 5px;
				border: none;
				background-color: transparent;
				border-bottom: 1px solid gray;
				box-sizing: border-box; /* Important for width to include padding and border */
			}
			&[type="checkbox"],
			&[type="radio"] {
				width: 21px;
				height: 21px;
			}
		}

		.van-checkbox,
		.van-radio {
			margin: 0 0 12px 6px;
			padding: 6px 0;
		}
		table {
			width: 100%;
			border-collapse: collapse;
			th,
			td {
				border: 1px solid #ccc7;
				padding: 8px;
				text-align: center;
				input {
					&[type="text"] {
						width: 100%;
						padding: 5px;
						border: none;
						text-align: center;
						box-sizing: border-box; /* Important for width to include padding and border */
					}
					&[type="checkbox"],
					&[type="radio"] {
						width: 25px;
						height: 25px;
					}
				}
			}
		}
	}
}
.ques-design {
	height: 100%;
	transition: all 0.2s;
	[contenteditable="true"] {
		outline: none;
	}
	.waiting-component {
		box-shadow: 1px 1px 5px #ccc;
		padding: 10px;
		margin: 10px 0;
		cursor: move;
	}
	.dragging-item {
		box-shadow: 0px 0px 15px 3px #ccc inset;
		cursor: move;
	}
	.active-item {
		box-shadow: 0px 0px 5px #ccc inset;
	}
	.vjs-tree-node.is-highlight,
	.vjs-tree-node:hover {
		background-color: transparent !important;
	}
	.ques-block {
		padding: 10px;
		margin: 10px 0;
		border: 1px solid #ccc1;
		.trans-in {
			cursor: text;
			flex-grow: 1;
			border: none;
			background: transparent;
			&:focus {
				outline: 1px dashed #ccc;
			}
		}
		.ques-opt-title {
			display: flex;
			font-size: 18px;
			font-weight: 600;
			margin: 0 0 10px 0;
			i {
				font-style: normal;
			}
			.ques-opt-title-opt {
				opacity: 0;
				transition: all 0.2s;
				width: 200px;
				> * {
					margin: 0 6px;
				}
			}
			.star {
				color: red;
				&::after {
					content: "*";
					padding-right: 3px;
					vertical-align: sub;
				}
			}
		}
		.ques-opt-body {
			.ques-opt-item {
				display: flex;
				margin: 8px 0 8px 16px;
				.ques-opt-label {
					display: flex;
					position: relative;
					align-items: center;
					.trans-in {
						cursor: text;
						margin-left: 6px;
						min-width: 200px;
						background: transparent;
						padding: 3px 12px 3px 3px;
						&:focus {
							outline: 1px dashed #ccc;
						}
					}
					input[type="text"] {
						height: 28px;
					}
				}
				.ques-opt-label-opt {
					display: flex;
					opacity: 0;
					align-items: center;
					font-size: 16px;
					font-weight: 600;
					transition: all 0.2s;
					> * {
						margin: 0 6px;
					}
				}
			}
			.ques-opt-add {
				opacity: 0;
			}
		}
		&.active-item {
			.ques-opt-label-opt,
			.ques-opt-title-opt,
			.ques-opt-add,
			.ques-opt-row-opt,
			.ques-opt-col-opt {
				opacity: 1 !important;
				transition: all 0.2s;
			}
		}
	}
	.icon-move {
		cursor: move;
	}
}
